<template>
  <div id="headerDiv">
    <div id="headerTopDiv" :style="'max-width: ' + width + 'px'">
      <div id="leftHeader">
        <img id="logo" src="@/assets/image/logo.png" @click="$router.push({ path: 'index' })"  />
        <!-- <span id="logoTitle">企业服务平台</span> -->
      </div>
      <div id="rightHeader">
        <div id="littleBtn">
          <div v-if="showNavigation" style="display: flex">
            <!-- <div v-show="!isLogin()"> -->
            <div v-show="!companyInfo">
              <span class="littleBtnDiv" @click="$router.push({ path: '/login' })">登录</span>
              <span>|</span>
              <span class="littleBtnDiv" @click="$router.push({ path: '/register' })">注册</span>
              <span>|</span>
            </div>
            <!-- <div v-show="isLogin()"> -->
            <div v-if="companyInfo">
              <span style="margin-right: 10px">
                {{
                  companyInfo.companyName
                }}
              </span>
              <span class="littleBtnDiv" @click="logout">退出</span>
              <span>|</span>
            </div>
            <!-- @click="$router.push({path: 'financeSettle'})" -->
            <span
              class="littleBtnDiv"
              @click="$CheckRole('楼宇业主认证', () => {
                $router.push({ path: '/investment/investmentSettled' })
              })">楼宇业主入驻</span>
            <span 
              class="littleBtnDiv" 
              @click="$CheckRole('投资机构认证', () => {
                $router.push({ path: '/finance/financeSettle' })
              })">投资机构入驻</span>
            <span
              v-if="resultCompany == 0"
              class="littleBtnDiv"
              @click="$CheckRole('服务机构认证', () => {
                $router.push({ path: '/serviceEnter' })
              })">服务机构入驻</span>
            <span class="littleBtnDiv" @click="$router.push({ name: 'companySpace' })">企业空间</span>
          </div>
          <div v-if="!showNavigation">
            <span class="littleBtnDiv" @click="$router.push({ path: '/index' })">平台首页</span>
            <span class="littleBtnDiv">帮助中心</span>
          </div>
        </div>
        <div id="bigBtn" v-if="showNavigation">
          <div
            v-for="(navigation, index) in navigations"
            :key="index"
            :class="navigation.name == currentName ? 'navigation navigationSelected' : 'navigation'"
            @click="hrefTo(navigation)"
          >{{ navigation.name }}</div>
        </div>
      </div>
    </div>
    <div id="headerLine"></div>
  </div>
</template>

<script>
import { logout } from '@/utils/util.js'
import { hostqt } from '@/utils/config.js'
import { request } from '@/utils/request.js'
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
  name: 'headerBar',
  data() {
    return {
      currentName: '首页',
      navigations: [
        {
          name: '首页',
          url: '/index',
        },
        {
          name: '政策服务',
          url: '/policy',
        },
        {
          name: '人才服务',
          url: '/help',
        },
        {
          name: '招商中心',
          url: '/investment',
        },
        {
          name: '培训中心',
          url: '/training',
        },
        {
          name: '金融服务',
          url: '/finance',
        },
      ],
      resultCompany: 0,
      showNavigation: true // 跳转登录注册页面隐藏tabbar
    }
  },
  props: {
    navigationName: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 1200,
    },
  },
  computed: {
    ...mapState(['companyInfo']),
  },
  watch: {
    $route() {
      this.initNav()
    }
  },
  created() {
    this.reGetCompanyInfo()
    this.initNav()
  },
  methods: {
    ...mapMutations(['reFreshCompanyInfo']),
    ...mapActions(['reGetCompanyInfo']),
    initNav() {
      let path = this.$route.path
      let nav = this.navigations.find(el => path.startsWith(el.url))
      this.currentName = nav ? nav.name : ''
      // 跳转登录注册页面隐藏tabbar
      if(['/login', '/register', '/menAuthentication'].find(e => e == path)) this.showNavigation = false
      else this.showNavigation = true
    },
    /**
     * 跳转页面
     * @param navigation 要跳转的页面对象
     */
    hrefTo(navigation) {
      this.$router.push({ path: navigation.url })
    },
    /**
     * 注销登录
     */
    logout() {
      logout()
      this.reFreshCompanyInfo()
      this.$router.replace('/login')
    },
    // 判断服务机构是否入驻
    async getcheckHasSettled(corporationId) {
      let obj = {
        corporationId,
      }
      let api = `${hostqt}/commerce/agency/checkHasSettled`
      let res = await request(
        this,
        api,
        obj,
        'POST',
        {},
        false,
        'commerce/agency/checkHasSettled'
      )
      // console.log('checkHasSettled', res)
      if (res.status == 200) {
        this.resultCompany = res.result.result
      }
    }
  }
}
</script>

<style lang="scss" scoped>
a {
  text-decoration: none; /* 去除默认的下划线 */
  outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
}

#headerDiv {
  width: 100%;
  background-image: url('~@/assets/image/headerBar/headerBackground.png');
  background-repeat: no-repeat;
  padding-top: 10px;
  background-size: cover;
  position: fixed;
  top: 0;
  z-index: 100;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
}

#headerTopDiv {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

#leftHeader {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

#logo {
  /* width: 100%;
  height: 100%; */
  cursor: pointer;
}

#logoTitle {
  color: $colorA;
  font-weight: bold;
  font-size: 20px;
  text-indent: 10px;
  letter-spacing: 3px;
  white-space: nowrap;
}

#littleBtn {
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  color: #939597;
  margin-bottom: 15px;
}

#littleBtn * {
  margin-left: 10px;
}

#littleBtn .littleBtnDiv:hover {
  cursor: pointer;
  text-decoration: underline;
}

#bigBtn {
  display: flex;
  justify-content: flex-end;
}

.navigation {
  padding: 10px 0;
  font-weight: bold;
  font-size: 15px;
  width: 100px;
  color: $colorA;
  transition: all 0.2s ease 0s;
}

.navigationSelected {
  background-color: $colorA;
  color: white;
}

.navigation:hover {
  cursor: pointer;
  background-color: $colorA;
  color: white;
}

#headerLine {
  background-color: $colorA;
  width: 100%;
  height: 3px;
}
</style>
